<template>
	<div>
		<mj-title type="h2" title="Tooltip 文字提示"></mj-title>
		<div class="page-desc">文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。</div>

		<mj-title type="h5" title="基础使用"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
			    <div class="tooltip-demo">
			       <mj-tooltip content="这是提示内容这是提示内容"><span>上左</span></mj-tooltip>
			       <mj-tooltip content="这是提示内容这是提示内容" direction="top"><span>上边</span></mj-tooltip>
			       <mj-tooltip content="这是提示内容" direction="top-right"><span>上右</span></mj-tooltip>
			    </div>
			    <div class="tooltip-demo">
			       <mj-tooltip direction="left" content="这是提示内容">
			          <span>左边</span>
			       </mj-tooltip>
			       <span style="visibility: hidden;"></span>
			       <mj-tooltip direction="right" content="这是提示内容"><span>右边</span></mj-tooltip>
			    </div>
			    <div class="tooltip-demo">
			       <mj-tooltip direction="bottom-left" content="这是提示内容"><span>下左</span></mj-tooltip>
			       <mj-tooltip direction="bottom" content="这是提示内容"><span>下边</span></mj-tooltip>
			       <mj-tooltip direction="bottom-right" content="这是提示内容"><span>下右</span></mj-tooltip>
			    </div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;div>
    &lt;div class="tooltip-demo">
       &lt;mj-tooltip content="这是提示内容这是提示内容">&lt;span>上左&lt;/span>&lt;/mj-tooltip>
       &lt;mj-tooltip content="这是提示内容这是提示内容" direction="top">&lt;span>上边&lt;/span>&lt;/mj-tooltip>
       &lt;mj-tooltip content="这是提示内容" direction="top-right">&lt;span>上右&lt;/span>&lt;/mj-tooltip>
    &lt;/div>
    &lt;div class="tooltip-demo">
       &lt;mj-tooltip direction="left" content="这是提示内容">
          &lt;span>左边&lt;/span>
       &lt;/mj-tooltip>
       &lt;span>&lt;/span>
       &lt;mj-tooltip direction="right" content="这是提示内容">&lt;span>右边&lt;/span>&lt;/mj-tooltip>
    &lt;/div>
    &lt;div class="tooltip-demo">
       &lt;mj-tooltip direction="bottom-left" content="这是提示内容">&lt;span>下左&lt;/span>&lt;/mj-tooltip>
       &lt;mj-tooltip direction="bottom" content="这是提示内容">&lt;span>下边&lt;/span>&lt;/mj-tooltip>
       &lt;mj-tooltip direction="bottom-right" content="这是提示内容">&lt;span>下右&lt;/span>&lt;/mj-tooltip>
    &lt;/div>
&lt;/div>
&lt;/template>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>


		<mj-title type="h5" title="多文字自动换行"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
			    <div class="tooltip-demo">
			       <mj-tooltip content="提示语的左边位置跟当前标签对齐，如提示语X轴位置到浏览器右边的距离小于最大宽，将以最小宽显示并换行"><span>上左</span></mj-tooltip>
			       <mj-tooltip content="上边提示是根据是根据当前标签中间位置，向左偏移50%实现居中，如果当前标签到浏览器右边的距离小于最大宽时，实际显示宽为到边浏览器右边的距离，并不是最大宽" direction="top"><span>上边</span></mj-tooltip>
			       <mj-tooltip content="这里跟上左类型，计算的是到浏览器左边的距离" direction="top-right" :maxWidth="200"><span>上右</span></mj-tooltip>
			    </div>
			    <div class="tooltip-demo">
			       <mj-tooltip direction="left" content="受当前标签到浏览器左边的距离影响">
			          <span>左边</span>
			       </mj-tooltip>
			       <span style="visibility: hidden;"></span>
			       <mj-tooltip direction="right" content="受当前标签到浏览器左边的距离影响" :maxWidth="200"><span>右边</span></mj-tooltip>
			    </div>
			    <div class="tooltip-demo">
			       <mj-tooltip direction="bottom-left" content="这是提示内容，如果内容超过设定的最大宽时则自动换行。"><span>下左</span></mj-tooltip>
			       <mj-tooltip direction="bottom" content="这是提示内容，如果内容超过设定的最大宽时则自动换行。如果内容超过设定的最大宽时则自动换行"><span>下边</span></mj-tooltip>
			       <mj-tooltip direction="bottom-right" content="这是提示内容，如果内容超过设定的最大宽时则自动换行。这是提示内容，如果内容超过设定的最大宽时则自动换行。"><span>下右</span></mj-tooltip>
			    </div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
&lt;div class="tooltip-demo">
	&lt;mj-tooltip content="提示语的左边位置跟当前标签对齐，如提示语X轴位置到浏览器右边的距离小于最大宽，将以最小宽显示并换行">&lt;span>上左&lt;/span>&lt;/mj-tooltip>
	&lt;mj-tooltip content="上边提示是根据是根据当前标签中间位置，向左偏移50%实现居中，如果当前标签到浏览器右边的距离小于最大宽时，实际显示宽为到边浏览器右边的距离，并不是最大宽" direction="top">&lt;span>上边&lt;/span>&lt;/mj-tooltip>
	&lt;mj-tooltip content="这里跟上左类型，计算的是到浏览器左边的距离" direction="top-right" :maxWidth="200">&lt;span>上右&lt;/span>&lt;/mj-tooltip>
	&lt;/div>
	&lt;div class="tooltip-demo">
	&lt;mj-tooltip direction="left" content="受当前标签到浏览器左边的距离影响">
	&lt;span>左边&lt;/span>
	&lt;/mj-tooltip>
	&lt;span>&lt;/span>
	&lt;mj-tooltip direction="right" content="受当前标签到浏览器左边的距离影响" :maxWidth="200">&lt;span>右边&lt;/span>&lt;/mj-tooltip>
&lt;/div>
&lt;div class="tooltip-demo">
	&lt;mj-tooltip direction="bottom-left" content="这是提示内容，如果内容超过设定的最大宽时则自动换行。">&lt;span>下左&lt;/span>&lt;/mj-tooltip>
	&lt;mj-tooltip direction="bottom" content="这是提示内容，如果内容超过设定的最大宽时则自动换行。如果内容超过设定的最大宽时则自动换行">&lt;span>下边&lt;/span>&lt;/mj-tooltip>
	&lt;mj-tooltip direction="bottom-right" content="这是提示内容，如果内容超过设定的最大宽时则自动换行。这是提示内容，如果内容超过设定的最大宽时则自动换行。">&lt;span>下右&lt;/span>&lt;/mj-tooltip>
&lt;/div>
&lt;/template>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>


		<mj-title type="h5" title="支持多种效果"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
			    <mj-tooltip content="这里是提示文字，因为icon比较小，这个方向箭头明显是没有对齐的">
			    <i class="tooltip-icon">?</i>
			    </mj-tooltip>
			    <mj-tooltip content="这里是提示文字。解决的办法就是添类名，修改样式。这里顺便把外观也给改下" className="tooltip-align"><i class="tooltip-icon">?</i></mj-tooltip>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-tooltip content="这里是提示文字，因为icon比较小，这个方向箭头明显是没有对齐的">
    &lt;i class="tooltip-icon">?&lt;/i>
    &lt;/mj-tooltip>
    &lt;mj-tooltip content="这里是提示文字。解决的办法就是添类名，修改样式。这里顺便把外观也给改下" className="tooltip-align">&lt;i class="tooltip-icon">?&lt;/i>&lt;/mj-tooltip>
&lt;/template>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>


		<mj-title type="h5" title="固定显示"></mj-title>
		<mj-tabs class="mb50">
			<mj-tab-pane label="HTML" name="html">
			  <div class="tooltip-demo">
			    <mj-tooltip content="一直都显示的" :always="true" direction="bottom">
			       <span>always</span>
			    </mj-tooltip>
			  </div>
			</mj-tab-pane>
			<mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
    &lt;mj-tooltip content="一直都显示的" :always="true" direction="bottom">
       &lt;span>always&lt;/span>
    &lt;/mj-tooltip>
&lt;/template>
</code>
</pre>
			</mj-tab-pane>
		</mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Tooltip 参数"></mj-title>
        <table class="api-table">

            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
            	<tr>
            		<td>content</td>
            		<td>显示的内容</td>
            		<td>String</td>
            		<td>-</td>
            	</tr>
            	<tr>
            		<td>className</td>
            		<td>添加的类名</td>
            		<td>String</td>
            		<td>-</td>
            	</tr>
            	<tr>
            		<td>direction</td>
            		<td>显示方向。分top-left、top、top-right、left、right、bottom-left、bottom、bottom-right共8个方向</td>
            		<td>String</td>
            		<td>-</td>
            	</tr>
            	<tr>
            		<td>maxWidth</td>
            		<td>最大显示宽</td>
            		<td>Number</td>
            		<td>500</td>
            	</tr>
            	<tr>
            		<td>delay</td>
            		<td>延时关闭时间，单位毫秒。主要是为了能让鼠标移到提示文字上面，实现点链接等</td>
            		<td>Number</td>
            		<td>200</td>
            	</tr>
            	<tr>
            		<td>always</td>
            		<td>是否总是可见</td>
            		<td>Boolean</td>
            		<td>false</td>
            	</tr>
            </tbody>
        </table>
	</div>
</template>

<style scoped>
  .tooltip-demo{margin-bottom: 30px}
  .tooltip-demo span{
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #f7f7f7;
    border: 1px solid #dddee1;
    border-radius: 3px;
    cursor: pointer;
    transition: all .5s;
    margin-right: 30px}
  .tooltip-demo span:hover {
    background: #fff;
    border-color: #36a1d3;}
  .tooltip-icon {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-style: normal;
    background: #ddd;
    display: inline-block;
    border-radius: 50%;
    cursor: pointer;
    margin-right: 30px} 
  .tooltip-align{color:#fff;background: #66b1ff}  
</style>

